<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #SomeElementYouWantToAnimate {
        width: 20px;
        height: 20px;
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <div id="SomeElementYouWantToAnimate"></div>
    <script>
      // var start = null;
      // var element = document.getElementById('SomeElementYouWantToAnimate');
      // element.style.position = 'absolute';
      // function step(timestamp) {
      // if (!start) start = timestamp;
      //   var progress = timestamp - start;
      //   var left  =  Math.min(progress / 10, window.innerWidth-22) ;
      //   element.style.left =left+ 'px';
      //   console.log(left,progress / 10)
      //   // if (progress < 2000) {
      //   //   window.requestAnimationFrame(step);
      //   // }
      //   if(left<(window.innerWidth-22)){
      //     window.requestAnimationFrame(step);
      //   }
      // }

      // window.requestAnimationFrame(step);

      (async function () {
        function getData() {
          return new Promise((resolve) => {
            setTimeout(() => {
              console.log(2);
              resolve(9);
            }, 2000);
          });
        }
        function getData2() {
          return new Promise((resolve) => {
            setTimeout(() => {
              console.log(2);
              resolve(9);
            }, 2000);
          });
        }
        console.log(1);
        await getData();
        console.log(3);
        await getData2();
        console.log(99);
      })();
    </script>
  </body>
</html>
